<template>
    <div class="needExa">
        <div class="needExa_top">
		    <div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">待审核<i class="el-icon-close"></i></div>
		</div>

        <!-- 头部导航 -->
        <div class="navTab">
            <div class="navTabList">
                <div class="navTabItem" :class="{'navTabItem_active':navIndex==index}" v-for="(item,index) in navTab" :key="index" @click="navFn($event)" :data-index='index'>{{item}}<div class="navBorder" v-if="navIndex==index"></div></div>
            </div>
        </div>

        <!-- 表格（设计师） -->
        <div class="needExa_table" >
            <div class="needExa_bottom_table">
                <table>
                    <tr>
                        <th></th>
                        <th>序号</th>
                        <th>会员账号</th>
                        <th>昵称</th>
                        <th>提现金额</th>
                        <th>到账卡</th>
                        <th>到账卡号</th>
                        <th>手续费</th>
                        <th>提现日期</th>
                        <th>代付结果</th>
                        <th>失败原因</th>
                        <th>操作</th>
                    </tr>
                    <tr v-for="(v,i) in tableList" :key="i">
                        <td>
                            <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
                        </td>
                        <td>{{v.outsn}}</td>
                        <td>{{v.mobile}}</td>
                        <td>{{v.uid}}</td>
                        <td>{{v.amount}}</td>
                        <td>{{v.bank_name}}</td>
                        <td>{{v.card_no}}</td>
                        <td>{{v.fee}}</td>
                        <td>{{$moment(v.create_time*1000).format('yyyy-MM-DD HH:mm:ss')}}</td>
                        <td>{{v.refund_res==0?'未通知':v.refund_res==1?'已通知':v.refund_res==2?'代付成功':v.refund_res==3?'处理中':v.refund_res==4?'代付失败':''}}</td>
                        <td>{{v.refund_msg?v.refund_msg:''}}</td>
                        <td>
                            <button class="editor" @click="toPass(v.outsn,v.card_id)">批准</button>
                            <button class="delete" :data-index="i" @click="refuse(v.outsn,v.card_id)">拒绝</button>
                            <div class="refuse">
                                <!--拒绝弹出框  -->
                                <el-dialog
                                    title="请输入驳回原因"
                                    :close-on-press-escape="false"
                                    :close-on-click-modal="false"
                                    :visible.sync="dialogVisible_refu"
                                    width="760px"
                                    top="150px"
                                    :before-close="handleClose_refu">
                                    <textarea type="text" v-model="refuseInfo" placeholder="请输入"></textarea>
                                    <h4 v-if="refuseStatus">驳回原因必填！</h4>
                                    <span slot="footer" class="dialog-footer-btn">
                                        <el-button @click="dialogVisible_refu = false">返回</el-button>
                                        <el-button type="primary" @click="toReject">确定</el-button>
                                    </span>
                                </el-dialog>
                            </div>
                        </td>
                    </tr>
                    <tr v-if="tableList.length == 0"><td class="table_title" colspan="15">当前数据空空如也</td></tr>
                </table>
            </div>
        </div>
        

        <!-- 表格（装修管家） -->
        

        <!-- 表格（施工队） -->
        

        <!-- 表格（商家） -->
        

        <!-- 全选与分页 -->
        <div class="needExa_bottom_page">
            <div class="needExa_bottom_page_left">
                <div class="needExa_bottom_page_left_checkAll" @click="handerCheckAll">
                    <font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
                </div>全选
                <!-- <button class="needExa_bottom_page_left_btn" @click="selectDel">删除</button> -->
            </div>
            <div class="needExa_bottom_page_right">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-sizes="[15, 20, 30, 40]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    background>
                </el-pagination>
            </div>
        </div>
        
    </div>
    
</template>

<script>
export default {
    data(){
        return{
            user_id:null,
            activeName:'first',
            navTab:['合作商','创业主','创业精英'],
            navIndex:0,
            tableList:[],
            navType:null,
            checkAll:false,
            checkBoxAll:[],				// 选中的数据
			shelvesAlls:[],
            page:1,
            pageSize:15,
			      total:0,
            lookIndex:null,
            dialogVisible:false,
            dialogVisible_refu:false,  //拒绝弹框
            refuseInfo:'',    //驳回原因
            refuseStatus:false,  //未填写驳回原因时弹出
            rowId:'',            //拒绝弹框的id
            sta_date:'',
            end_date:''
        }
    },
    mounted(){
        let user_id = localStorage.getItem('user_id')
        this.user_id = Number(user_id)
        this.getExamineList(this.navIndex)
    },
    methods:{

        // 获取待审核列表
        
        getExamineList(nav){
            this.navType = nav
            let role = nav==0?1:nav==1?2:nav==2?3:0;
            let data = {
                role,
                status:0,
                page:this.page,
                pagesize:this.pageSize,
                sta_date:this.sta_date,
                end_date:this.end_date
            }
            this.$http.post('/api/root/Cashout/index',data).then(res=>{
                console.log(res);
                if(res.code==1){
                    this.tableList = res.data.list?res.data.list:[];
                    this.total = res.data.total
                }
            })
        },


        // 点击头部nav
        navFn(e){
            console.log(e.target.dataset.index);
            this.navIndex = e.target.dataset.index;
            this.page = 1;
            this.pageSize = 15
            this.getExamineList(this.navIndex)
        },
        // 点击批准
        toPass(outsn,card_id){
            this.$http.post('/api/root/Cashout/Approval',{outsn,card_id,status:1}).then(res=>{
                if(res.code==1){
                    this.getExamineList(this.navIndex)
                    this.$message({
                        showClose: true,
                        message: '审核通过!',
                        type: "success"
                    })
                }else{
                    this.$message.error(res.msg)
                }
            })
        },

        // 点击拒绝
        refuse(outsn,card_id){
            this.$confirm('确定驳回此申请吗？','提示',{
                iconClass: "el-icon-question",//自定义图标样式
                confirmButtonText: "确认",//确认按钮文字更换
                cancelButtonText: "取消",//取消按钮文字更换
                showClose: true,//是否显示右上角关闭按钮
                type: "warning",//提示类型  success/info/warning/error
            }).then(res=>{
                this.$http.post('/api/root/Cashout/Approval',{outsn,card_id,status:2}).then(res=>{
                if(res.code==1){
                    this.getExamineList(this.navIndex)
                    this.$message({
                        showClose: true,
                        message: '已驳回!',
                        type: "success"
                    })
                }else{
                    this.$message.error(res.msg)
                }
            })
            })
        },


        // 点击拒绝
        // refuse(id,i,e){
        //     console.log(i,e);
        //     this.lookIndex = e.target.dataset.index
        //     if(this.lookIndex==i){
        //         this.dialogVisible_refu=true
        //         this.rowId = id
        //     }
        // },
        
        handleClose_refu(){
            this.dialogVisible_refu = false
        },

        // 拒绝弹框的确定按钮
        // toReject(){
        //     if(this.refuseInfo!=''){
        //         console.log(this.refuseInfo);
        //         this.$http.post('/api/root/Approval/regApproval',{user_id:this.user_id,apply_id:this.rowId,status:0,reason:this.refuseInfo}).then(res=>{
        //            if (res.code==1) {
        //                this.getExamineList(this.navIndex)
        //                this.dialogVisible_refu = false;
        //                this.refuseInfo = ''
        //            }
        //         })
        //     }else{
        //         this.refuseStatus = true
        //     }
        // },


        handleClose(){
            this.dialogVisible = false
        },


        handleClose_lic(){
            this.dialogVisible_lic = false
        },

         // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index > -1){
						arr.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				this.shelvesAlls.push(this.tableList[i].product_id);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
				}else {
					this.checkBoxAll = [];
				}
				// 去重
				let res = this.checkBoxAll;
				for(let i=0;i<res.length;i++){
					for(let j=i+1;j<res.length;j++) {
						if(res[i] == res[j]) {
							res.splice(j,1);
							j--;
						}
					}
				};
                this.checkBoxAll.map(v => {
					return this.shelvesAlls.push(this.tableList[v].store_id.toString());;
				})
			},

        // 全选中删除
        // selectDel(){

        // },

	        //分页
			handleSizeChange(val) {
				this.pageSize = val;
				console.log(val);
        this.page = 1
				this.getExamineList(this.navIndex)
			},
			handleCurrentChange(val) {
			    this.page = val;
				console.log(val);
				this.getExamineList(this.navIndex)
			},
    }
}
</script>

<style lang="less" scoped>
@import 'approList.less';
</style>

